<template>
  <flowerKnowledgeSearch @searchClick="handleSearch" />
  <div class="switch">
    <el-switch v-model="isCollapseAll" @change="clickHandler" style="  width: 1100px;
  justify-content:flex-end;" />是否关闭列表
  </div>
  <div class="part" v-loading="loading">
    <div class="plate">
      <div class="plateA">
        <div class="flowerA">
          <el-collapse class="Collapse" v-model="activeName">
            <DynamicCollapseItem
              v-for="item in collapseItems"
              :key="item.id"
              :name="item.name"
              :id="item.id"
              :picture="item.picture"
              :otherName="item.otherName"
              :origin="item.origin"
              :season="item.season"
              :sunshine="item.sunshine"
              :temperature="item.temperature"
              :soil="item.soil"
              :moisture="item.moisture"
              :plant="item.plant"
              :manure="item.manure"
              :water="item.water"
              :temperatureLight="item.temperatureLight"
              :protect="item.protect"
            >
            </DynamicCollapseItem>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
  <el-backtop :right="100" :bottom="100" />
</template>

<script>
import flowerKnowledgeSearch from "@/components/front/flowerKnowledgeSearch.vue";
import DynamicCollapseItem from "@/components/front/DynamicCollapseItem.vue";
import { getAllFlowerKnowledgeData, getFlowerKnowledgePage } from "@/api/flowerKnowledge.js";

export default {
  components: {
    flowerKnowledgeSearch,
    DynamicCollapseItem,
  },
  data() {
    return {
      name: "IntroduceT",
      activeName: [],
      collapseItems: [],
      loading: true,
      totalNum: null,
      isCollapseAll: false, // 控制折叠面板全部展开或折叠的开关状态
    };
  },
  methods: {
    getAllData() {
      getAllFlowerKnowledgeData().then((response) => {
        this.collapseItems = response.data.data.records;
        var myArr = [];
        for (var i = 1; i <= response.data.data.total; i++) {
          myArr.push(i);
        }
        this.activeName = myArr;
        this.totalNum = response.data.data.total;
        this.loading = false;
      });
    },
    handleSearch(searchQuery) {
      console.log(searchQuery);
      getFlowerKnowledgePage({
        name: searchQuery,
        size: this.totalNum,
      }).then((response) => {
        console.log(response.data.data);
        this.collapseItems = response.data.data.records;
      });
    },
    clickHandler() {
      if (this.isCollapseAll) {
        // 如果开关为开启状态，则折叠全部面板
        this.activeName = [];
      } else {
        // 如果开关为关闭状态，则展开全部面板
        var myArr = [];
        for (var i = 1; i <= this.totalNum; i++) {
          myArr.push(i);
        }
        this.activeName = myArr;
      }
    },
  },
  mounted: function () {
    this.getAllData();
  },
};
</script>


<style scoped>
.part {
  display: flex;
  justify-content: center;
  align-items: center;
}
.plate {
  width: 1400px;
  justify-content: space-between;
  margin: 1%;
  display: flex;
}
.plateA {
  width: 100%;
  float: left;
  /* background: linear-gradient(141deg, #ffcb9c, #fcf3d9); */
  border-radius: 10px;
}
.switch{
  display: flex;
  justify-content: center;
  align-items: center;
  color: darkgray;
  font-size: 13px;
}
</style>